﻿@using Microsoft.Extensions.Options
@using BookMarks.Web.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/css/home.css" rel="stylesheet" />
    <style>
       
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <header>
            <div class="header-container">
                <a href="/" class="logo">@systemInfo.CurrentValue.Title</a>
                <div class="search-container">
                    <input type="text" class="search-input" placeholder="搜索书签..." v-model="searchFilter.Title"
                           @@keyup.enter="performSearch">
                    <button v-if="searchFilter.Title" class="clear-search" @@click="clearSearch">
                        ×
                    </button>
                    <button class="search-button" @@click="performSearch">
                        <template v-if="searching">
                            <div class="loading"></div>
                        </template>
                        <template v-else>🔍</template>
                    </button>
                </div>
                <div class="nav-links">
                    <a> <span class="icon">👤</span> @_currentUser.Name</a>
                    <a href="/manage"> <span class="icon">🏠</span></a>
                </div>
            </div>
        </header>

        <main class="container">
            <aside class="sidebar">
                <div class="sidebar-title">
                    <span>书签分类</span>
                </div>
                <ul class="category-list">
                    <li v-for="(item, idx) in menuData" :key="item.id">
                        <a :class="{active: activeInfo.id === item.id}" @@click="localSelect(item)">
                            <span class="icon">{{idx | iconFilter}}</span> {{item.name}}
                        </a>
                    </li>
                </ul>
            </aside>

            <div class="content">
                <div class="tools-container">
                    <div class="tools-header">
                        <h2 class="tools-title">{{activeInfo.name}}</h2>
                        <div class="search-info" v-if="searchFilter.Title">
                            <span v-if="searching">搜索中...</span>
                            <span v-else>搜索"{{searchFilter.Title}}"，找到 {{tableData.length}} 个结果</span>
                        </div>
                    </div>
                    <div class="tools-grid" v-if="tableData.length > 0">
                        <a class="tool-item" v-for="(o, index) in tableData" :key="o.id" target="_blank" :href="o.url">
                            <div class="tool-icon">
                                <img v-if="o.icon" :src="o.icon" alt="">
                                <span v-else>{{o.icon | imgFilter}}</span>
                            </div>
                            <div class="tool-info">
                                <div class="tool-name">{{o.title | titleFilter}}</div>
                                <div class="tool-description">{{o.title | descFilter }}</div>
                            </div>
                        </a>
                    </div>
                    <div class="no-results" v-else>
                        <i class="fa fa-search">🔍</i>
                        <h3 v-if="searchFilter.Title">未找到与"{{searchFilter.Title}}"相关的结果</h3>
                        <h3 v-else>该分类下暂无书签</h3>
                        <p>尝试其他搜索词或浏览其他分类</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="~/vue/vue.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script>
        const emojis = ["🍞","🥐","🥖","🫓","🥨","🥯","🥞","🧇","🧀","🍖","🍗","🥩","🥓","🍔","🍟","🍕","🌭","🥪","🌮","🌯","🥙","🧆","🥚","🍳","🥘","🍲","🥣","🥗","🍿","🧈","🧂","🥫","🌍","🌎","🌏","🌐","🗺️","🗾","🧭","🏔️","⛰️","🌋","🗻","🏕️","🏖️","🏜️","🏝️","🏞️","🏟️","🏛️","🏗️","🧱","🏘️","🏚️","🏠","🏡","🏢","🏣","🏤","🏥","🏦","🏨","🏩","🏪","🏫","🏬","🏭","🏯","🏰","💒","🗼","🗽"];

        // 添加debounce指令
        Vue.directive('debounce', {
            inserted: function (el, binding) {
                if (binding.value !== binding.oldValue) {
                    let timeout = null;
                    el.addEventListener('input', function () {
                        clearTimeout(timeout);
                        timeout = setTimeout(function () {
                            binding.value();
                        }, parseInt(el.getAttribute('debounce')) || 300);
                    });
                }
            }
        });

        var $taskVue = new Vue({
            el: "#app",
            data() {
                return {
                    initFilter: { Name: "" },
                    searchFilter: { Title: "" },
                    activeInfo: {
                        name:""
                    },
                    menuData: [],
                    tableData: [],
                    totalRows: 0,
                    searching: false,
                    searchTimeout: null
                }
            },
            created() {
                this.handleLoadData();
            },
            watch: {
                // 监听搜索词变化，实现实时搜索
                'searchFilter.Title': function(newVal, oldVal) {
                    if (newVal !== oldVal) {
                        this.debouncedSearch();
                    }
                }
            },
            methods: {
                handleLoadData() {
                    let curry = { pageNo: 1, pageSize: 10 };
                    var data = { ...curry };
                    this.$http.get("/category/list", data).then((res) => {
                        this.menuData = res;
                        this.activeInfo = res[0];
                        this.localSelect(res[0]);
                    }).catch(e => {
                        console.log(e);
                    });
                },

                localSelect(data) {
                    this.activeInfo = data;
                    this.performSearch();
                },

                performSearch() {
                    clearTimeout(this.searchTimeout);
                    this.searching = true;

                    let curry = { pageNo: 1, pageSize: 50 };
                    var data = {
                        ...curry,
                        categoryId: this.activeInfo.id,
                        Title: this.searchFilter.Title
                    };

                    this.$http.post("/bookmark/pages", data).then((res) => {
                        this.tableData = res.rows;
                        this.totalRows = res.totalRows;
                        this.searching = false;
                    }).catch(e => {
                        console.log(e);
                        this.searching = false;
                    });
                },

                // 防抖搜索
                debouncedSearch() {
                    clearTimeout(this.searchTimeout);
                    this.searchTimeout = setTimeout(() => {
                        this.performSearch();
                    }, 300);
                },

                // 清空搜索
                clearSearch() {
                    this.searchFilter.Title = '';
                    this.performSearch();
                }
            },
            filters: {
                iconFilter(index){
                    return emojis[index % emojis.length];
                },
                titleFilter(title){
                   if (title.length <= 9) return title;
                   return title.substring(0, 9) + "...";
                },
                descFilter(title){
                   if (title.length <= 23) return title;
                   return title.substring(0, 23) + "...";
                },
                imgFilter(){
                    const randomIndex = Math.floor(Math.random() * emojis.length);
                    return emojis[randomIndex];
                }
            }
        });
    </script>
</body>
</html>
